/**
 * @file highlight.js
 */


var $ = Zepto;

var $doc = $(document);
var $el;
var timer; // 考虑到滚动操作时不能高亮，所以用到了100ms延时

// 负责移除className.
function dismiss() {
    var cls = $el.attr('hl-cls');

    clearTimeout(timer);
    $el.removeClass(cls).removeAttr('hl-cls');
    $el = null;
    $doc.off('touchend touchmove touchcancel', dismiss);
}

/**
 * @name highlight
 * @desc 禁用掉系统的高亮，当手指移动到元素上时添加指定class，手指移开时，移除该class.
 * 当不传入className是，此操作将解除事件绑定。
 * 此方法支持传入selector, 此方式将用到事件代理，允许dom后加载。
 * @grammar  highlight(className, selector )   ⇒ self
 * @grammar  highlight(className )   ⇒ self
 * @grammar  highlight()   ⇒ self
 * @example var div = $('div');
 * div.highlight('div-hover');
 *
 * $('a').highlight();// 把所有a的自带的高亮效果去掉。
 */
$.fn.highlight = function (className, selector) {
    return this.each(function () {
        var $this = $(this);

        $this.css('-webkit-tap-highlight-color', 'rgba(255,255,255,0)')
            .off('touchstart.hl');

        className && $this.on('touchstart.hl', function (e) {
            var match;

            $el = selector ? (match = $(e.target).closest(selector,
                this)) && match.length && match : $this;

            // selctor可能找不到元素。
            if ($el) {
                $el.attr('hl-cls', className);
                timer = setTimeout(function () {
                    $el.addClass(className);
                }, 100);
                $doc.on('touchend touchmove touchcancel', dismiss);
            }
        });
    });
};

